<script lang="ts">
  export default { name: 'ApiManageList' };
</script>
<script lang="ts" setup>
  import { ref, watch, toRefs, defineExpose } from 'vue';
  import { List, ListItem, ListItemMeta, Pagination } from '@arco-design/web-vue';
  import { Action } from '/@/components/Action';
  import { DefaultFieldsName } from './props';
  // import { usePagination, PaginationProps } from '/@/hooks/usePagination';
  // import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';

  // type ManageListParams<T = Recordable> = BasicPageParams & T;
  // interface ManageListItemRecord {
  //   id: number | string;
  //   title: string;
  //   time: string;
  //   like: number;
  //   collect: number;
  //   replay: number;
  //   view: number;
  //   read: number;
  // }
  // type ManageListGetResultModel = BasicFetchResult<ManageListItemRecord>;
  // type DropdownActionsTypeMeta = 'edit' | 'delete';
  interface ActionRecord {
    label: string;
    onClick: PromiseFn | Fn;
  }

  interface ApiManageListProps {
    api: PromiseFn;
    actions?: ActionRecord[] | ((...args: any[]) => ActionRecord[]);
    // paginationProps?: PaginationProps;
    immediate?: boolean;
    params?: Recordable;
    getLink?: Fn;
    reload?: boolean;
    // dropdownActionsType?: DropdownActionsTypeMeta[];
    fieldNames?: Recordable<string>;
  }
  const props = withDefaults(defineProps<ApiManageListProps>(), {
    immediate: true,
    reload: true,
    dropdownActionsType: () => ['edit', 'delete'],
    // paginationProps: () => ({ total: 0 }),
    fieldNames: () => DefaultFieldsName,
    // actions: () => [],
  });
  const { fieldNames } = toRefs(props);
  // const { paginationProps } = toRefs(props);

  const total = ref(0);
  const current = ref(1);
  const pageSize = ref(5);

  const loading = ref(false);
  const data = ref<Recordable[]>([]);

  async function reload() {
    loading.value = true;
    const result = await props.api({
      ...(props.params ?? {}),
      ...{ page: current.value, size: pageSize.value },
    });
    loading.value = false;
    data.value = result.list;
    total.value = result.pagination.total;
  }

  defineExpose({ reload });

  watch(
    () => [props.api, pageSize.value, current.value],
    async () => {
      reload();
    },
    { immediate: props.immediate },
  );

  function onPaginationChange(page: number) {
    current.value = page;
  }

  function callActions(item: any) {
    return typeof props.actions === 'function' ? props.actions(item) : props.actions;
  }
</script>

<template>
  <div>
    <List :data="data" :bordered="false" :loading="loading">
      <template #item="{ item }">
        <component
          :is="getLink ? 'a' : 'div'"
          class="hover:bg-gray-100 px-[13px] py-[20px] block cursor-pointer"
          v-bind="{
            ...(getLink && {
              href: getLink(item),
              target: '_blank',
            }),
          }"
        >
          <ListItem class="p-0" action-layout="vertical">
            <template #actions>
              <slot name="desc" :data="item"></slot>
            </template>
            <template #extra>
              <Action :dropdownActions="callActions(item)" :data="{ item, reload }" />
            </template>
            <ListItemMeta>
              <template #title>{{ item[fieldNames.title] }}</template>
            </ListItemMeta>
          </ListItem>
        </component>
      </template>
    </List>
    <Pagination
      class="float-right mt-[24px]"
      :total="total"
      :pageSize="pageSize"
      :current="current"
      @change="onPaginationChange"
    />
  </div>
</template>
